<template>
    <div class="big">
        <!-- 导航栏 -->
        <div class="navigation">
            <span @click="back">
                <img src="../../assets/home-img/返回1.png" alt="">
            </span>
            <h3>图文咨询</h3>
            <span></span>
        </div>
        <!-- 通知栏 -->
        <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
        <!-- 医生数据 -->
        <div class="doctor">
            <div class="doctorLeft">
                <img :src="detailList.avatar" alt="">
            </div>
            <div class="doctorRight">
                <h1>{{ detailList.name }}&ensp;<span class="position">{{ detailList.position }}</span> </h1>
                <p class="hospital">{{ detailList.hospital }}&emsp;{{ detailList.class }}</p>
            </div>
        </div>
        <!-- 病情描述 -->
        <div class="diseaseDescription">
            <h1 class="description">
                请填写病情描述
                <span class="upload">
                    <img src="../../assets/home-img/云上传_o.png" alt="">
                    导入历史病情
                </span>
            </h1>
            <textarea name="" id=""
                placeholder="请详细描述咨询人当前的病情状况, 最近医院就医用药情况以及需要医生解答的问题, 如有检查资料请确保清晰可见后上传, 以便医生能更全面了解病况并提供专业的指导意见, 问题提交后无法修改或补充信息"></textarea>
        </div>
        <!-- 上传图片 -->
        <div class="uploadPictures">
            <p class="description">
                请上传检查报告或患处照片
                <span class="upload">
                    <img src="../../assets/home-img/云上传_o.png" alt="">
                    导入历史病情
                </span>
            </p>
            <p class="tip">照片仅自己和医生可见(最多9张)</p>
            <van-uploader v-model="fileList" multiple max-count="9" />
            <button class="nextStep" @click="next">下一步</button>
            <!-- <button class="nextStep nextSteped">下一步</button> -->
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import http from '../../http/http';

const route = useRoute();
const router = useRouter();
const detail = route.query;
const detailList = ref([]);

// 获取医生数据
const getdetailList = async () => {
    await http.get(`/doctorList?id=${detail.id}`).then(res => {
        detailList.value = res.data.data;
    })
}

const back = () => {
    // router.push('/homeDetail')
    router.back();
}

// 上传图片
const fileList = ref([]);

const next = () => {
    router.push('/consultNext');
}

onMounted(() => {
    getdetailList()
})
</script>

<style lang='scss' scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.big {
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;

    .navigation {
        width: 100%;
        height: 92px;
        display: flex;
        justify-content: space-around;
        align-items: center;

        h3 {
            flex: 1;
            text-align: center;
            font-size: 35px;
        }

        span {
            width: 40px;
            padding-top: 7px;

            img {
                width: 40px;
                height: 40px;
                margin: 0 10px;
            }
        }
    }

    .doctor {
        width: 100%;
        height: 160px;
        display: flex;
        padding: 0 30px;
        background-color: #fff;

        .doctorLeft {
            margin-right: 20px;
            width: 120px;
            height: 100%;
            display: flex;
            align-items: center;

            img {
                width: 120px;
                height: 120px;
                border-radius: 60px;
            }
        }

        .doctorRight {
            flex: 1;
            padding-top: 15px;

            h1 {
                width: 100%;
                height: 80px;
                line-height: 80px;
                font-size: 45px;
                display: flex;
                align-items: center;

                .position {
                    font-weight: normal;
                    font-size: 28px;
                }
            }

            .hospital {
                color: #9a9a9a;
                font-size: 26px;
            }
        }
    }

    .diseaseDescription {
        width: 100%;
        margin-top: 20px;
        background-color: #fff;
        padding: 0 20px;

        .description {
            width: 100%;
            height: 90px;
            line-height: 90px;
            font-size: 40px;

            .upload {
                float: right;
                font-weight: normal;
                font-size: 25px;
                display: flex;
                align-items: center;
                color: #246cd2;

                img {
                    width: 50px;
                    height: 50px;
                }
            }
        }

        textarea {
            width: 100%;
            height: 160px;
            border: 0;
            margin-top: 10px;

            &::placeholder {
                font-size: 26px;
                letter-spacing: 2px;
            }
        }
    }

    .uploadPictures {
        width: 100%;
        margin-top: 20px;
        background-color: #fff;
        padding: 0 20px;

        .description {
            width: 100%;
            font-size: 30px;
            padding-top: 20px;

            .upload {
                float: right;
                font-weight: normal;
                font-size: 25px;
                display: flex;
                align-items: center;
                color: #246cd2;

                img {
                    width: 50px;
                    height: 50px;
                }
            }
        }

        .tip {
            color: #9d9d9d;
            margin-bottom: 20px;
        }

        .nextStep {
            width: 95%;
            height: 80px;
            border-radius: 10px;
            background-color: #b4ccf8;
            color: #fff;
            border: 0;
            position: fixed;
            bottom: 40px;
            left: 2.5%;
        }
    }
}
</style>
